<template>
	<view class="login-agree  " :style="styleObj">
		<view class="flex-center">
			<u-checkbox-group
				:class="['cup']"
				v-model="isAgree"
				placement="column"
				@change="checkboxChange" >
				<u-checkbox active-color="#26bbff" name="agree" :label-disabled="false"></u-checkbox>
			</u-checkbox-group>
			<view class=" c999 " style="font-size: 14px;" @click="checkboxChange2">
				<text>{{diyCone.text || '我已阅读接受宅小职'}}</text>
				<template v-if="diyCone.btn">
					<text @click.stop="goArticle({id:diy.id,title:diy.title,cmd:diy.cmd})" class="c55">{{diyCone.btn}}</text>
				</template>
				<template v-else>
					<!-- showUserAgree -->
					<text @click.stop="goArticle({id:'ZXZ_USER_AGREEMENT',title:'用户协议'})" class="c55 cup">用户协议</text>、
					<!-- showPrivacyAgree -->
					<text @click.stop="goArticle({id:'ZXZ_PRIVACY_AGREEMENT',title:'隐私协议'})" class="c55 cup">隐私协议</text>
				</template>
				
			</view>
		</view>
		<u-popup :show="showAgree" :closeable="false" mode="center">
			<view class="m-popup">
				<view class="m-popup-top flex-center">
					{{title}}
					<view class="posa cup" @click="showAgree = false">
						<u-icon size="20" color="#272536"  name="close"></u-icon>
					</view>
				</view>
				<view class="m-popup-content">
					<view class="m-popup-content-logo">
						<u-image src="/static/images/login/logo.png" mode="widthFix" width="94" height="24"></u-image>
					</view>
					<scroll-view class="m-popup-content-scroll" scroll-y="true" :show-scrollbar="true">
						<pre>{{agreeDetail}}</pre>
						<!-- #ifdef H5 -->
						<jyf-parser :html="agreeDetail" ref="article"></jyf-parser>
						<!-- #endif -->
					</scroll-view> 
				</view>
				
			</view>
		</u-popup>
	</view>
</template>

<script>
	import jyfParser from '@/components/jyf-parser/jyf-parser'
	import htmlParser from '@/utils/html-parser.js'
	export default {
		name:"m-agree",
		props:{
			styleObj:{
				type:Object,
				default:()=>{}
			},
			agree:{
				type:Boolean,
				default:false,
			},
			diy:{
				type:Object,
				default:()=>{}
			}
			
		},
		watch:{
			isAgree(val){
				this.$emit('changeAgree',val)
			}
		},
		data() {
			return {
				title:'',
				isAgree:[],
				showAgree:false,
				agreeDetail:'',
				diyCone:{}
			};
		},
		mounted() {
			this.agree
			if(this.agree){
				this.isAgree.push('agree') 
			}
			this.diyCone = this.diy || {}
			// this.getAgree()
		},
		methods:{
			getUserAgree(){
				this.$api.user_agreement().then(res => {
					if(res.code == 200){
						this.title = '宅小职用户协议'
						this.agreeDetail = res.data
						this.showAgree = true;
					}
				})
			},
			showUserAgree(){
				this.getUserAgree()
				
			},
			showPrivacyAgree(){
				this.$api.privacy_agreement().then(res => {
					if(res.code == 200){
						this.title = '宅小职隐私协议'
						this.agreeDetail = res.data
						this.showAgree = true;
					}
				})
			},
			showUserDiy(){
				this.$api[this.diy.cmd]().then(res => {
					if(res.code == 200){
						this.title = this.diy.title
						if(res.data.length){
							res.data.map(item => {
								if(item.dict_code == 'ZXZ_TEAM_PROFILE_AGREEMENT'){
									this.agreeDetail = item.dict_value
								}
							})
						}else{
							this.agreeDetail = res.data
						}
						this.showAgree = true;
					}
				})
			},
			checkboxChange(e){
			},
			checkboxChange2(){
				debugger
				let agree = this.isAgree.length?null:'agree'
				if(agree){
					this.isAgree.splice(0,1,agree)
				}else{
					this.isAgree.splice(0,1)
				}
				
				// if(!this.isAgree.length){
				// 	this.isAgree.push('agree')
				// }else{
					
				// }
			},
		}
	}
</script>

<style lang="scss" scoped>
	.m-popup{
		border-radius: 10rpx;
		overflow: hidden;
		width: 85vw;
		&-top{
			line-height: 60rpx;
			background: #eaf2f5;
			position: relative;
		}
		&-content{
			background: #fff;
			&-logo{
				height: 60rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #e7eaef;
				padding-left: 20rpx;
			}
			&-scroll{
				width: calc(100% - 40rpx);
				height: calc(100vh - 400rpx);
				padding-left: 20rpx;
				padding-top: 15rpx;
				padding-right: 20rpx;
			}
			
		}
		.posa{
			left: auto;
			top:16rpx;
			right: 22rpx;
		}
	}
	@media screen and (min-width: 1024px) and (max-width:1920px){
		.m-popup{
			width:1200px;
			&-top{
			}
		
		}
	} 
</style>